<!-- components/PaginationSelect.vue -->
<template>
    <div class="pagination-select">
      <el-select
        v-model="selectedValue"
        filterable
        remote
        :remote-method="handleSearch"
        :loading="loading"
        :placeholder="placeholder"
        @change="handleChange"
        @visible-change="handleVisibleChange"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
        
        <template #footer>
          <div class="pagination-footer">
            <el-pagination
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handlePageChange"
            />
          </div>
        </template>
      </el-select>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref, watch } from 'vue'
  
  interface OptionItem {
    value: string | number
    label: string
  }
  
  export default defineComponent({
    name: 'PaginationSelect',
    props: {
      modelValue: {
        type: [String, Number, Array],
        default: ''
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      apiFunc: {
        type: Function,
        required: true
      },
      pageSize: {
        type: Number,
        default: 10
      },
      immediate: {
        type: Boolean,
        default: false
      }
    },
    emits: ['update:modelValue', 'change'],
    setup(props, { emit }) {
      const selectedValue = ref(props.modelValue)
      const options = ref<OptionItem[]>([])
      const loading = ref(false)
      const currentPage = ref(1)
      const total = ref(0)
      const keyword = ref('')
  
      // 获取数据
      const fetchData = async () => {
        loading.value = true
        try {
          const params = {
            page: currentPage.value,
            pageSize: props.pageSize,
            keyword: keyword.value
          }
          
          const res = await props.apiFunc(params)
          options.value = res.list.map((item: any) => ({
            value: item.id,
            label: item.name
          }))
          total.value = res.total
        } catch (error) {
          console.error('获取下拉选项失败:', error)
          options.value = []
          total.value = 0
        } finally {
          loading.value = false
        }
      }
  
      // 搜索处理
      const handleSearch = (query: string) => {
        keyword.value = query
        currentPage.value = 1
        fetchData()
      }
  
      // 分页变化
      const handlePageChange = (page: number) => {
        currentPage.value = page
        fetchData()
      }
  
      // 下拉框显示/隐藏
      const handleVisibleChange = (visible: boolean) => {
        if (visible && options.value.length === 0) {
          fetchData()
        }
      }
  
      // 选择变化
      const handleChange = (value: string | number) => {
        emit('update:modelValue', value)
        emit('change', value)
      }
  
      // 监听props变化
      watch(() => props.modelValue, (newVal) => {
        selectedValue.value = newVal
      })
  
      // 立即加载数据
      if (props.immediate) {
        fetchData()
      }
  
      return {
        selectedValue,
        options,
        loading,
        currentPage,
        total,
        handleSearch,
        handlePageChange,
        handleVisibleChange,
        handleChange
      }
    }
  })
  </script>
  
  <style scoped>
  .pagination-select {
    width: 100%;
  }
  
  .pagination-footer {
    padding: 10px;
    display: flex;
    justify-content: center;
  }
  </style>